/**
 * @file 通过分享进入，返回首页
 * @author xzh
 * @date 2019-10-07 12:22:53
 */

import React, { useState, useEffect, useRef } from 'react';
import WPT from 'wpt';
import { usePageContext } from '@wpt/showHide/hooks';
import C from 'classnames';

import BackTop from 'components/BackTop';
import moveElement from 'modules/moveElement';
import S from './index.m.less';

function isFisrtPage() {
    const { state } = window.history.state || {};
    const { index } = state || {};
    return !document.referrer && Number(index) === 0;
}

export default function BackHome(props) {
    const { visible = true } = props;
    const [show, setShow] = useState(false);
    const context = usePageContext();
    const domRef = useRef();
    useEffect(() => {
        const getShow = () => {
            if (WPT.os.wpt || WPT.os.yjPlatform || WPT.os.dyXcx || WPT.os.xcx) {
                return false;
            }

            const text = $(context.$dom)
                .find('.mainMenu-modules')
                .text() || '';
            if (text.includes('首页')) {
                return false;
            }

            const { from = '', r = '' } = context.query;

            // 支付 余额 im 或者是从首页、menu跳转过来的不展示
            if (
                ['/balance/', '/pay', '/im/', '/uri/L', '/union'].some(path => context.url.includes(path))
                || /home|menu|category|live|discovery/.test(r)
            ) {
                return false;
            }

            // 来源是微信分享 或者 是第一个页面
            if (['timeline', 'groupmessage', 'singlemessage'].includes(from) || isFisrtPage()) {
                return true;
            }

            return r.includes('shareTemplate');
        };

        const timeout = setTimeout(() => {
            setShow(getShow());
        }, 1000);

        return () => {
            window.clearTimeout(timeout);
        };
    }, [context.$dom, context.query, context.url]);

    useEffect(() => {
        if (!domRef.current) {
            return () => {};
        }

        const moveEvent = moveElement(domRef.current.firstElementChild, ({ moveY, target }) => {
            target.style.top = `${moveY}px`;
        });

        return () => {
            moveEvent && moveEvent.destroy();
        };
    }, [show]);

    if (!visible || !show) {
        return null;
    }

    return (
        <div ref={domRef}>
            <Link
                href="/home"
                style={props.style}
                className={C(S.backHome, 'fixIphoneMarginBottom', props.className)}
            />
        </div>
    );
}

export const BackHomeNBackTop = ({ pageConfig = {} }) => {
    const [flipUp, setFlipUp] = useState(false);

    const onBackTopChange = show => setFlipUp(show);

    const { fixedIcon: { backHome = true, backTop = true } = {} } = pageConfig;

    return (
        <>
            <BackHome className={C(flipUp && S.flipUp)} visible={backHome} />
            <BackTop className={C.bt} onChange={onBackTopChange} visible={backTop} />
        </>
    );
};
